<template>
  <div ref="chartRef" style="height: 100%;">

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import webapi from '@/api/webapi.js';
import * as echarts from 'echarts';
import utils from '@/assets/utils.js'
import useWarehouseStore from '@/stores/warehouse.js';
const warehouseStore = useWarehouseStore();
const chartRef = ref(null);

onMounted(() => {
  var myChart = echarts.init(chartRef.value, 'macarons');
  var option;

  option = {
    title: {
      text: '月度作业量统计',
      left: 'center',
      top: 0.5 * utils.fontSizeRem(),
      textStyle: {
        fontSize: utils.fontSizeRem(),
        color: '#ffffff',
      }
    },
    legend: {
      bottom: utils.fontSizeRem(),
      textStyle: {
        fontSize: utils.fontSizeRem()
      }
    },
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: {
        fontSize: utils.fontSizeRem() // 修改为需要的字体大小
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: utils.fontSizeRem() // 修改为需要的字体大小
      }
    },
    series: [

    ],
    grid: {
      left: 4 * utils.fontSizeRem(),
      right: 1 * utils.fontSizeRem(),
      top: 3 * utils.fontSizeRem(),
      bottom: 4.5 * utils.fontSizeRem(),
    },
  };

  myChart.setOption(option);

  setTimeout(() => {
    fetchData(myChart)
  }, 9000);
});

function fetchData(myChart) {
  webapi.post('/trans/monthsummary', { divisioncode: warehouseStore.getWarehouse() }).then((response) => {
    var xAxisData = [];
    var receivecountData = [];
    var shipcountData = [];
    var workcountData = [];
    response.data.forEach(element => {
      xAxisData.push(element.monthcode);
      receivecountData.push(element.receivecount)
      shipcountData.push(element.shipcount)
      workcountData.push(element.workcount)
    });


    var seriesData = [
      {
        name: '入库',
        type: 'bar',
        stack: 'total',
        data: receivecountData,
        label: {
          show: true,
          fontSize: utils.fontSizeRem(),
        },
      },
      {
        name: '出库',
        type: 'bar',
        stack: 'total',
        data: shipcountData,
        label: {
          show: true,
          fontSize: utils.fontSizeRem(),
        },
      },
      {
        name: '共计',
        type: 'line',
        data: workcountData
      }
    ]


    myChart.setOption({
      xAxis: {
        data: xAxisData
      },
      series: seriesData
    })
  });

  setTimeout(() => {
    fetchData(myChart)
  }, 8 * 60 * 60 * 1000);
}

</script>
